<template>
  <el-space direction="vertical" style="width: 100%">
    <el-card shadow="hover" style="width: 100%">
      <template #header>
        <el-text size="large" type="primary">基本信息</el-text>
      </template>
    </el-card>
    <el-card shadow="hover" style="width: 100%">
      <template #header>
        <el-text size="large" type="primary">联系方式</el-text>
      </template>

    </el-card>
    <el-card shadow="hover" style="width: 100%">
      <template #header>
        <el-text size="large" type="primary">附加信息</el-text>
      </template>
    </el-card>
  </el-space>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import type { UserBasicInfo, UserContactInfo } from '@/types/SharedTypes'


onMounted(() => {
  console.log(`the component is now mounted.`)
})

const userBasicInfo: UserBasicInfo[] = [
  { label: '用户名', value: '--', key: 'username' },
  { label: '姓名', value: '--', key: 'realName' },
  { label: '国家/地区', value: '--', key: 'country' },
  { label: '证件类型', value: '--', key: 'idType' },
  { label: '证件号码', value: '--', key: 'idCard' }
]

const userContactInfos: UserContactInfo[] = [
  { label: '手机号', value: '---', key: 'phone' },
  { label: '邮箱', value: '---', key: 'mail' },
  { label: '地址', value: '---', key: 'address' },
  { label: '邮编', value: '---', key: 'postCode' }
]
</script>

<style lang="scss" scoped>
/* Your component styles go here */
</style>